<template>
	<view>
		<u-popup v-model="regBool" mode="center" :mask-close-able="false">
			<view class="mwrap">
				<image class="ruleBgp" mode="widthFix" :src="imgPath+'/static/big/rules.png'"></image>
				<scroll-view scroll-y="true" class="ruleBox">
					<image class="rule" mode="widthFix" :src="imgPath+'/static/big/teamRules.png'"></image>
				</scroll-view>
				<image class="close" @click="close" mode="widthFix" :src="imgPath+'/static/close.png'"></image>
			</view>
		</u-popup>
		<image @click="showRule" class="r_btn" mode="widthFix" src="/static/img/btn_1.png"></image>
	</view>
</template>
<script>

	export default {
		name:"Rules",
		data() {
			return {
				regBool:false,
			};
		},
		mounted() {


		},
		props: {
			 isShow: {
				type: Boolean,
				default: true
			},
		},
		methods:{
			close(){
				this.regBool = false;
			},
			showRule(){
				this.regBool = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
.r_btn{
	position: fixed;
	right:2rpx;
	top:220rpx;
	width:82rpx;
	height:80rpx;
}
.mwrap{
	width: 750rpx;
	height: 1050rpx;
	display: flex;
	justify-content: center;
	position: relative;
	.ruleBgp{
		position: absolute;
		width: 610rpx;
		height: 930rpx;
	}
	.ruleBox{
		position: absolute;
    width: 590rpx;
    height: 720rpx;
    left: 46rpx;
    top: 140rpx;
    overflow: auto;
		.rule{
			width: 570rpx;
		}
	}
	.wait{
		position: absolute;
		width: 290rpx;
    left: 66rpx;
		bottom: 100rpx;
	}
	.confirm{
		position: absolute;
		width: 290rpx;
    right: 88rpx;
		bottom: 100rpx;
	}
	.disable{
		filter: grayscale(1);
 		pointer-events: none;
	}
	.close{
		position: absolute;
		width: 100rpx;
		left: 308rpx;
		bottom: 0;
	}
}

</style>